<template>
  <div class="container">
    <el-scrollbar style="height:100%" class="scrollbar-x">
      <el-page-header class="header" content="人员详情（刘德华）" @back="goBack" />
      <el-tabs v-model="activeName" type="card" class="f-flex1 tabs" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <basics />
        </el-tab-pane>
        <!-- <el-tab-pane label="职位信息" name="second">
          <work />
        </el-tab-pane>
        <el-tab-pane label="标识管理" name="third">
          <identification />
        </el-tab-pane>
        <el-tab-pane label="权限管理" name="fourth">
          <role />
        </el-tab-pane> -->
      </el-tabs>
    </el-scrollbar>
  </div>
</template>

<script>
import Basics from './Basics'
import Work from './Work'
import Identification from './Identification'
import Role from './Role'
export default {
  components: {
    Basics,
    Work,
    Identification,
    Role
  },
  data() {
    return {
      activeName: 'first'
    }
  },
  mounted() {
    console.log(this.$route.params.id)
  },
  methods: {
    goBack() {
      console.log(this.$route, this.$router.go(-1))
      console.log('go back')
    },
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  overflow: hidden;
  height: 100%;
  .header {
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ebeef5;
  }
  .tabs {
    padding: 20px 30px;
  }
}
</style>
